
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<body>
	<ui:composition template="/templates/template.xhtml">

		<ui:define name="title">Login</ui:define>

		<ui:define name="body">
			<script type="text/javascript">
			/*<![CDATA[*/
				var count=#{session.maxInactiveInterval};
	
				var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
	
				function timer() {
				  count=count-1;
				  if (count <= 0) {
				     //clearInterval(counter);
				     window.location = '#{facesContext.externalContext.requestContextPath}/salir.html';
				     //counter ended, do something here
				     return;
				  }
				  
				  //Do code for showing the number of seconds here
				}

				$(function(){
					$('#textfield').focus();
				});
				/*]]>*/
			</script>
			<h:outputStylesheet library="css" name="stylelog.css"/>
			
			<rich:panel header="Ingresar al sistema" style="background-image:url('#{resource['images:loginpage_02.jpg']}'); background-color: #E5E5E5;">
			<span id="timer" class="timer"></span>
				<h:form prependId="false">
					<h:inputHidden value="#{homeSessionController.allowNavigate}" />
					<h:panelGroup layout="block" id="layer01_holder">
						<div id="left"></div>
						<div id="center"></div>
						<div id="right"></div>
					</h:panelGroup>
	
					<h:panelGroup layout="block" id="layer02_holder">
						<div id="left"></div>
						<div id="center"></div>
						<div id="right"></div>
					</h:panelGroup>
	
					<h:panelGroup layout="block" id="layer03_holder">
						<div id="left"></div>
						<div id="center">
							
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td height="20">LOGIN</td>
								</tr>
								<tr>
									<td><h:panelGrid columns="2">
											<h:outputLabel value="Usuario" />
											<h:inputText value="#{loginController.usuario.identificador}" required="true" id="textfield" size="30" requiredMessage="Campo usuario requerido"/>
											
											<h:outputLabel value="Clave" />
											<h:inputSecret value="#{loginController.usuario.clave}" required="true" id="textfield2" style="margin-top:5px;" size="30" requiredMessage="Campo clave requerido"/>
										</h:panelGrid> 
										
										<h:panelGroup layout="block" style="background-image:url('#{resource['images:loginpage_02.jpg']}'); background-color: #E5E5E5;" >
											<rich:messages ajaxRendered="true" title="No se pudo iniciar una sesion" style="font-weight:900;" />
										</h:panelGroup>
										
										<a4j:commandButton actionListener="#{loginController.btnSignIn}" value="Sign In" id="button"/>
									</td>
								</tr>
							</table>
						</div>
						<div id="right"></div>
					</h:panelGroup>
	
					<h:panelGroup layout="block" id="layer04_holder">
						<h:panelGroup layout="block" id="left"/>
							<h:panelGroup layout="block" id="center" rendered="true">
								<h:outputLabel value="Si no tiene una cuenta creela" rendered="false"/>
								<a4j:commandLink value=" aqui" actionListener="#{loginController.btnCreateAccount}" immediate="true" rendered="false"></a4j:commandLink> 
							</h:panelGroup>
							
							
						<h:panelGroup layout="block" id="right"/>
					</h:panelGroup>
				</h:form>	
			</rich:panel>	
		</ui:define>
	</ui:composition>
</body>
</html>